<template>
  <div class="login-page">
    <div class="login-title">
      <div class="login-title-child1th">登录</div>
      <div class="login-title-child2th">lover in my heart</div>
    </div>
    <div class="login-input">
      <el-input v-model="form.username" type="text" placeholder="用户名/邮箱" class="login-input-child1th">
        <template #prefix>
          <el-icon><User /></el-icon>
        </template>
      </el-input>
      <el-input v-model="form.password" type="password" placeholder="密码" class="login-input-child2th">
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="login-row">
      <el-row>
        <el-col :span="12" class="login-row-col1th">
          <el-checkbox v-model="form.remember" size="large">
            <span style="font-size: clamp(6px, 4vw, 12px)">记住我</span>
          </el-checkbox>
        </el-col>
        <el-col :span="12" class="login-row-col2th">
          <el-link class="login-forgot-link" @click="router.push('/forgot')">忘记密码？</el-link>
        </el-col>
      </el-row>
    </div>
    <div class="login-login">
      <el-button @click="login()" style="width: 80%" type="success" plain>立即登录</el-button>
    </div>
    <el-divider>
      <span class="login-divider-span1th">没有账号</span>
    </el-divider>
    <div>
      <el-button @click="router.push('/register')" style="width: 80%" type="warning" plain>注册账号</el-button>
    </div>
  </div>
</template>
<script setup>
import {Lock, User} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {ElMessage} from "element-plus";
import {get, post} from "@/api/request.js";
import router from "@/router/index.js";
import {useCounterStore} from "@/stores/counter.js";

const store = useCounterStore();
const form = reactive({
  username: '',
  password: '',
  remember: false
})

const login = () => {
  if (!form.username || !form.password) {
    ElMessage.warning('请填写用户名和密码!')
  }else {
    post('/api/auth/login', {
      username: form.username,
      password: form.password,
      remember: form.remember
    }, (message) => {
      ElMessage.success(message)
      get('/api/user/info', (message) => {
        store.auth.user = message
        router.push('/index')
      }, () => {
        store.auth.user = null
      })
    })
  }
}
</script>
<style scoped>
  @import "@/assets/css/welcome/login-page.scss";
</style>